<template>
  <div class="home main-padding">
    <div class="table-wrap">
      <div class="row-1 flex-row">
        <div class="terminal flex-average img-wrap">
          <img :src="image.terminal" class="home-img" @click="$router.push(terminalPath)">
        </div>
        <div class="wifi flex-average flex-col">
          <div class="flex-average wifi-item both-center-row">
            <span :class='["iconfont", "iconsignal3xinhao", "af", { "wifi-none": supported==""}]'></span>
            <span style="margin-left: 10px;" v-if="supported">{{supported}}</span>
          </div>
          <div class="flex-average wifi-item both-center-row">
            <span>{{'LAN'}}</span>
          </div>
        </div>
        <div class="router text-center flex-average img-wrap">
          <img :src="image.router" class="home-img">
        </div>
        <div class="flex-average flex-col ios-vertical-middle">
          <div class="connect">
            <div class="icon-pc">
              <div :class="['icon-netstatus',
              {'icon-pc-off': topology.internet == 'none',
              'icon-pc-on': topology.internet == 'ether',
              'icon-pc-4g': topology.internet == '4g',
              'icon-pc-wireless': topology.internet == 'wifi'} ]"></div>
            </div>
          </div>
        </div>
        <div class="world flex-average text-center img-wrap">
          <img :src="image.world" class="home-img"  @click="$router.push(internetPath)">
        </div>
      </div>
      <div class="row-2 flex-row" style="align-items: center;">
        <div class="flex-average text-center">
          <router-link :to="terminalPath" tag="a" class="home-btn">{{$t('home.btn[0]')}}</router-link>
        </div>
        <div class="flex-3 port-container text-center" >
          <img v-for="(item, idx) in topology.port" :key="idx"
          :src="item.status=='1'?portImage[1]:portImage[0]" style="width: 50px; padding: 0 10px;">
        </div>
        <div class="flex-average text-center">
          <router-link :to="internetPath" tag="a" class="home-btn">{{$t('home.btn[1]')}}</router-link>
        </div>
      </div>
    </div>
    <div class="main-content">
      <div class="info-wrap">
        <div class="info-box device-status box-common">
          <header class="header">{{$t('home.device_header')+'：'+uptime}}</header>
          <div class="info-main flex-row">
            <!-- <div class="info-item" v-for="(item, idx) in device" :key="idx" v-if="idx<terminalNum">
              <p class="device-value text-center">{{item.value}}</p>
              <p class="text-center label">{{item.label}}</p>
            </div> -->
            <div class="info-item" v-for="(item, idx) in device" :key="idx" v-if="idx<2">
              <!-- <div class="progress-container"> -->
                <svg width="100" height="100" viewBox="0 0 220 220" class="mb10"
                     xmlns="http://www.w3.org/2000/svg">
                    <defs>
                        <linearGradient id="orange_red" x1="0%" y1="0%" x2="100%" y2="100%">
                            <stop offset="0%" style="stop-color:rgb(255,0,0);stop-opacity:1"></stop>
                            <stop offset="100%" style="stop-color:rgb(255,255,0);stop-opacity:1"></stop>
                        </linearGradient>
                    </defs>

                    <circle cx="110"  cy="110"   r = "100"
                            fill="none"  stroke="#eee" stroke-width="20"
                        ></circle>
                    <circle cx="0"  cy="0"   r = "100" class="mycircle" id="progressRound" v-show="parseInt(item.value)"
                            transform="translate(110,110) rotate(-90)" :style="{'stroke-dasharray': Math.PI * 2 * parseInt(item.value) + ' 1000'}"
                    ></circle>
                    <text x="0" y="0" fill="#A187F3" class="txt" id="txt"
                          transform="translate(110,115)"
                    >{{item.value}}</text>
                    <!-- <text x="0" y="0" fill="#555" class="txt txt2"
                          transform="translate(110,130)"
                    >CPU占有率</text> -->
                </svg>
              <!-- </div> -->
              <p class="text-center label">{{item.label}}</p>
            </div>
            <div class="info-item" v-for="(item, idx) in device" :key="idx" v-if="idx>1">
              <p class="device-value text-center">{{item.value}}</p>
              <p class="text-center label">{{item.label}}</p>
            </div>
          </div>
        </div>
        <div class="info-box info-chart box-common">
          <!-- <header class="header">{{$t('home.chart.header')}}</header> -->
          <header class="header">{{traffic_title}}</header>
          <!-- TODO echarts 平滑曲线图 -->
          <div ref="line_chart" id="line-chart"></div>
        </div>
        <div class="info-box api-status box-common" v-if="!topology.internet">
          <header class="header flex-row"></header>
        </div>
        <div class="info-box wifi-status box-common" v-if="topology.internet==='wifi'">
          <header class="header flex-row">
            <div class="label-4-header">{{$t("home.interface.head_wifi[0]")}}</div>
            <div class="value-4">{{$t("home.interface.head_wifi[1]")}}</div>
          </header>
          <div class="list-wrap-4 both-center-row" v-for="(item, idx) in interface"
          :key="idx">
            <div class="label-4">{{item.label}}：</div>
            <div class="value-4">{{item.value ? item.value : "--/--"}}</div>
          </div>
          <div class="list-wrap-4 both-center-row">
            <div class="label-4">WIFI：</div>
            <div class="value-4">{{apclient.apclient_wifiname ? apclient.apclient_wifiname : "--/--"}}</div>
          </div>
        </div>
        <div class="info-box wifi-status box-common" v-if="topology.internet==='4g'">
          <header class="header flex-row">
            <div class="label-4-header">{{$t("home.interface.head_4G[0]")}}</div>
            <div class="value-4">{{$t("home.interface.head_4G[1]")}}</div>
          </header>
          <div class="list-wrap-4 both-center-row" v-for="(item, idx) in interface"
          :key="idx">
            <div class="label-4" v-if="idx!=1">{{item.label}}：</div>
            <div class="value-4" v-if="idx!=1">{{item.value}}</div>
            <!-- <div class="value-4" v-if="idx==5"><el-switch v-model="guest_info.guest_enabled" /></div> -->
            <!-- <div class="value-4" v-if="idx==6">{{guest_info.guest_ssid}}</div> -->
            <div class="label-4" v-if="idx==1">{{item.label}}：</div>
            <div class="value-4 both-center-row" v-if="idx==1">
              <span :class="'signal' + item.value"></span>
              <span style="margin-left:5px">
                {{(status4g.signal=="0" ? "" : status4g.signal+"%") }}
              </span>
            </div>
          </div>
        </div>
        <div class="info-box api-status box-common" v-if="topology.internet&&topology.internet!='wifi'&&topology.internet!='4g'">
          <header class="header flex-row">
            <div class="item-left-header">{{interface.head[0]}}</div>
            <div class="item-center text-center">{{interface.head[1]}}</div>
            <div class="item-right text-center">{{interface.head[2]}}</div>
          </header>
          <div class="list-wrap both-center-row" v-for="(item, idx) in interface.list" :key="idx">
            <div class="item-left detail">{{item.name+':'}}</div>
            <div class="item-center text-center detail">{{item.wan}}</div>
            <div class="item-right text-center detail">{{item.lan}}</div>
          </div>
        </div>
        <div class="info-box wifi-status box-common">
          <header class="header flex-row">
            <div class="label-4-header" :style="topology.wifi5?{width:'100px'}:{}">{{wifiStatus[0].label}}</div>
            <div class="value-4">{{wifiStatus[0].value}}</div>
            <div class="value-4" v-if="topology.wifi5">5G</div>
          </header>
          <div class="list-wrap-4 both-center-row" v-for="(item, idx) in wifiStatus"
          :key="idx" v-if="idx!=0">
            <div class="label-4" :style="topology.wifi5?{width:'100px'}:{}">{{item.label}}：</div>
            <div class="value-4">{{item.value?item.value:'--/--'}}</div>
            <div class="value-4" v-if="topology.wifi5">{{wifi5Status[idx].value?wifi5Status[idx].value:'--/--'}}</div>
            <!-- <div class="value-4" v-if="idx==5"><el-switch v-model="guest_info.guest_enabled" /></div> -->
            <!-- <div class="value-4" v-if="idx==6">{{guest_info.guest_ssid}}</div> -->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script src="./home.js">
</script>

<style lang="scss" scope>
  @import './home.scss';
</style>
